<template>
  <div class="vue-vw clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">安装依赖</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm install postcss-px-to-viewport-opt --save-dev<br>
            npm install postcss-viewport-units --save-dev<br>
            npm install cssnano --save-dev<br>
            npm install cssnano-preset-advanced --save-dev<br>
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">.postcssrc.js文件配置</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            module.exports = {<br>
              &nbsp;&nbsp;"plugins": {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;"postcss-import": {},<br>
                &nbsp;&nbsp;&nbsp;&nbsp;"postcss-url": {},<br>
                &nbsp;&nbsp;&nbsp;&nbsp;"autoprefixer": {},<br>
                &nbsp;&nbsp;&nbsp;&nbsp;"postcss-px-to-viewport-opt": {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 设计稿宽度<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewportWidth: 750,<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 设计稿高度，可以不指定<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewportHeight: 1334,<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// px to vw无法整除时，保留几位小数<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unitPrecision: 3,<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 转换成vw单位<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewportUnit: 'vw',<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 不转换的css类名<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectorBlackList: ['.ignore', '.hairlines'],<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 小于1px不转换<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minPixelValue: 1,<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 允许媒体查询中转换<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mediaQuery: false, <br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;排除不转化的第三方包<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exclude: /(\/|\\)(node_modules)(\/|\\)/
                &nbsp;&nbsp;&nbsp;&nbsp;},<br>
                &nbsp;&nbsp;&nbsp;&nbsp;"postcss-viewport-units":{},<br>
                &nbsp;&nbsp;&nbsp;&nbsp;"cssnano": {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;preset: "advanced",<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 设计稿宽度<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autoprefixer: false,<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"postcss-zindex": false<br>
                &nbsp;&nbsp;&nbsp;&nbsp;}<br>
              &nbsp;&nbsp;}<br>
            }
          </code>
        </div>
      </el-card>
       <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">消除vw对img的影响</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 全局添加css<br>
            img { content: normal !important; }
          </code>
        </div>
      </el-card>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'VueVw'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-vw{
  margin: 0 auto;
  overflow: hidden;
  .main{
    column-count: 2;
    column-gap:10px;
    padding: 10px;
  }
  .el-card{
    margin: 10px 0;
  }
  .el-card__header{
    padding: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    line-height: 30px;
  }
}
</style>
